import React, { Component} from 'react';
import { Layout, Menu,Table} from 'element-react';
import SideBar from './sidebar.jsx';
import Header from './header.jsx';
import styles from './index.less';
import Address from '../address/index.js';
import {Link}from 'react-router';

export class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
             component:'工作'
        }
        window.onresize = this.WindowSizeChange;
    }
    static defaultProps = {
        orientation:'row'
    }
    WindowSizeChange(){
        var  browserwidth  = document.documentElement.clientWidth;
        var  browserheight = document.documentElement.clientHeight;
    }
    ChangeComponent(index){
        if(index == 1){
            this.setState({component:'工作'})
        }else if(index == 2){
            this.setState({component:<PayFa/>})
        }else if(index == 3){
            this.setState({component:<Address/>})
        }else if(index == 4){
            this.setState({component:'待办事项'})
        }
    }
    render() {
     var wrapstyle={
         width:document.documentElement.clientWidth * 0.86,
         height:document.documentElement.clientHeight
     }
     var col = (
         <div className="container">
             <Header/>
            <SideBar orientation="col" handleTabs={(index)=>this.ChangeComponent(index)}/>
            <div className="wrapper-col">
                {this.state.component}
            </div>
         </div>
     )
     var row = (
        <div className="container">
            <SideBar orientation="row" handleTabs={(index)=>this.ChangeComponent(index)}/>
             <div className="wrapper-row" style={wrapstyle}>
                 <Header/>
                 <div className="component">
                     {this.state.component}
                 </div>
             </div>
         </div>
     )
     return row;
  }
}
